<!--
TODO 修改描述
@description xx管理-新增/编辑界面
@author 潘志勇
-->
<template>
  <a-modal
    :width="width"
    :visible="visible"
    :title="title"
    @ok="onSubmit"
    @cancel="onCancelOrClose"
    :confirmLoading="saveEditComponentFormSubmitting">

    <a-form @submit="onSubmit" :form="form">
      <a-form-item style="display: none" v-if="!isAddModal">
        <a-input type="hidden" v-decorator="['id']"/>
      </a-form-item>

      <!-- TODO 请修改表单项 -->

      <a-form-item
        :label="$t('ui:comm:name')"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="winter-input"
      >
        <a-input
          :placeholder="$t('ui:comm:placeholder')"
          auto-focus
          ref="AutofocusEle"
          v-decorator="['name', {
            rules:[{
              whitespace:true,
              required: true,
              pattern:/^.{1,200}$/,
              message: $t( 'bg:i18n-language:name-error', {max:200} )
            }]
          }]"
        />
      </a-form-item>

      <a-form-item
        :label="$t('ui:comm:code')"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="winter-input"
      >
        <a-input
          :placeholder="$t('ui:comm:placeholder')"
          v-decorator="['code', {
            rules:[{
              whitespace:true,
              required: true,
              pattern:/^[a-zA-Z\\_]{1,200}$/,
              message: $t('bg:i18n-language:code-error',{max:200})
            }]
          }]"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { ADD_EDIT_MODAL, ADD_SUC, EDIT_SUC } from '@/utils/GlobalConstant'

const storeNamespace = 'crud01'
export default {
  name: 'LanguageAddEditMgr',
  data () {
    return {
      form: this.$form.createForm(this),
      // 组件宽度
      width: 640,
      // 组件标题
      title: '',
      // 是否为Add模式
      isAddModal: true,
      // 组件可见状态
      visible: false,
      // 表单的标签布局定义
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      // 表单的输入控件布局定义
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
  },
  computed: {
    ...mapState({
      // 新增/编辑组件的表单是否处于提交状态
      saveEditComponentFormSubmitting: state => state[storeNamespace].saveEditComponentFormSubmitting
    })
  },
  methods: {
    ...mapActions(storeNamespace, ['add$', 'edit$']),
    /**
     * 以弹窗方式将组件打开
     * @param modal 模式. 可选值: add/edit
     * @param record 行数据(可选)
     */
    open ({ modal, record }) {
      if (this.$refs.AutofocusEle && this.$refs.AutofocusEle.focus) {
        /*
        想让表单元素获取焦点, 这两个元素都是不可少的, auto-focus用于首次打开界面, 获取交单, AutofocusEle用于再次打开界面时,获取焦点
        auto-focus
        ref="AutofocusEle"
         */
        const _this = this
        // 必须在setTimeout中获取焦点, 否则还是无法获取焦点
        setTimeout(() => {
          _this.$refs.AutofocusEle.focus()
        }, 1)
      }
      // 设置组件标题
      this.isAddModal = ADD_EDIT_MODAL.isAddModal(modal)
      this.title = this.isAddModal ? this.$t('ui:comm:opt:add') : this.$t('ui:comm:opt:edit')
      // 使组件可见
      this.visible = true
      // 组件初始化
      if (ADD_EDIT_MODAL.isAddModal(modal)) {
        this.addModalInit()
      } else {
        this.editModalInit(record)
      }
    },
    /**
     * 新增模式下的组件初始化
     */
    addModalInit () {

    },
    /**
     * 编辑模式下的组件初始化
     * @param record 待编辑数据
     */
    editModalInit (record) {
      const { form: { setFieldsValue } } = this
      this.$nextTick(() => {
        /*
         * 表单默认值填充(因为编辑的数据可能少于实际填充的数据, 会导致控制台给出类似:
         *`Warning: You cannot set a form field before rendering a field associated with the value`的警告,
         * 但这对实际开发和使用不影响, 此处不要有强迫症)
         */
        setFieldsValue(record)
      })
    },
    /**
     * 监听表单提交事件
     */
    onSubmit () {
      if (this.saveEditComponentFormSubmitting) {
        // 当前组件正处于提交中
        return
      }
      const _this = this
      const { form: { validateFields } } = this
      // 表单验证
      validateFields((errors, values) => {
        if (!errors) {
          if (_this.isAddModal) {
            // 执行新增操作
            _this.doSave(values)
          } else {
            // 执行编辑操作
            _this.doEdit(values)
          }
        }
      })
    },
    /**
     * 新增模式下的表单提交
     * @param data 待保存数据
     */
    doSave (data) {
      const _this = this
      const { form: { resetFields } } = this
      this.add$(data).then(() => {
        _this.visible = false
        // 重置表单
        resetFields()
        _this.$emit(ADD_SUC)
      })
    },
    /**
     * 编辑模式下的表单提交
     * @param data 待编辑数据
     */
    doEdit (data) {
      const _this = this
      const { form: { resetFields } } = this
      this.edit$(data).then(() => {
        _this.visible = false
        // 重置表单
        resetFields()
        _this.$emit(EDIT_SUC)
      })
    },
    /**
     * 监听取消或关闭事件
     */
    onCancelOrClose () {
      this.visible = false
      const { form: { resetFields } } = this
      // 重置表单
      resetFields()
    }
  }
}
</script>

<style scoped>

</style>
